<template>
  <div class="tree-container">
    <div class="t-query" v-if="topQuery">
      <div class="w-full flex items-center" style="gap: 4px">
        <el-input prefix-icon="el-icon-search" v-model="queryContent" @input="handleTreeFilter" class="jtyj-input"
          clearable></el-input>
        <!-- 检索 -->
        <!-- <el-badge :value="filterNum" class="item" :hidden="filterNum == 0">
          <el-popover placement="top" :title="$t('tool.rightMenu.showFilter')" trigger="hover">
            <el-button slot="reference" class="jtyj-btn-s" type="info" style="width: 32px; height: 32px"
              @click="openFilter">
              <span role="img" class="appIcon">
                <svg-icon icon-class="filter" width="16" height="16" />
              </span>
            </el-button>
          </el-popover>
        </el-badge> -->
        <el-popover v-if="topAdd" placement="bottom-start" title="" trigger="hover" :visible-arrow="false">
          <div class="dropdown-menu">
            <div class="menu-item mx-1" v-for="menu in topAddMenu" :key="menu.id" @click="handleMenuClick(menu)">
              <div class="flex items-center">
                <span role="img" class="appIcon" style="font-size: 16px; margin-right: 5px">
                  <svg-icon :icon-class="menu.icon" width="16" height="16" />
                </span>
                {{ $t("tool.rightMenu." + menu.i18nName) }}
              </div>
            </div>
          </div>
          <el-button slot="reference" class="jtyj-btn-s" type="primary" style="width: 32px; height: 32px">
            <span role="img" class="appIcon">
              <svg-icon class="jtyj-primary-color" icon-class="add" width="16" height="16" />
            </span>
          </el-button>
        </el-popover>
      </div>
      <!-- 检索框 -->
      <!-- <div class="filer-box" :class="isFilterOpen ? '' : 'hidden-height'">
        <div class="filter-item">
          <el-select v-model="filters.status" clearable placeholder="状态" class="jtyj-select">
            <el-option label="启用" value="enabled"></el-option>
            <el-option label="禁用" value="disabled"></el-option>
          </el-select>
        </div>
        <div class="filter-item">
          <el-select v-model="filters.tags" clearable placeholder="标签" class="jtyj-select">
            <el-option label="标签1" value="tag1"></el-option>
            <el-option label="标签2" value="tag2"></el-option>
          </el-select>
        </div>
        <div class="filter-item">
          <el-select v-model="filters.owner" clearable placeholder="责任人" class="jtyj-select">
            <el-option label="张三" value="zhangsan"></el-option>
            <el-option label="李四" value="lisi"></el-option>
          </el-select>
        </div>
        <div class="filter-item">
          <el-select v-model="filters.creator" clearable placeholder="创建人" class="jtyj-select">
            <el-option label="张三" value="zhangsan"></el-option>
            <el-option label="李四" value="lisi"></el-option>
          </el-select>
        </div>
        <div class="filter-item">
          <el-select v-model="filters.lastModifier" clearable placeholder="最后修改人" class="jtyj-select">
            <el-option label="张三" value="zhangsan"></el-option>
            <el-option label="李四" value="lisi"></el-option>
          </el-select>
        </div>
        <div class="filter-item">
          <el-radio-group class="common-radio-group" v-model="filters.matchType" size="mini">
            <el-radio-button label="匹配"></el-radio-button>
            <el-radio-button label="排除"></el-radio-button>
          </el-radio-group>
        </div>
      </div> -->
    </div>
    <div v-if="checkStrictlyUI" class="check-strictly-box">
      <el-checkbox v-model="checkStrictlyComputed">父子节点关联</el-checkbox>
    </div>
    <el-tree class="filter-tree" ref="treeRef" node-key="id" highlight-current :data="treeData" :props="defaultProps"
      :default-expand-all="defaultExpandAll" :show-checkbox="showCheckbox" :check-strictly="localCheckStrictly"
      :filter-node-method="filterNode" :expand-on-click-node="expandOnClickNode" @node-click="handleNodeClick"
      @node-drag-start="handleDragStart" @node-drag-enter="handleDragEnter" @node-drag-leave="handleDragLeave"
      @node-drag-over="handleDragOver" @node-drag-end="handleDragEnd" @node-drop="handleDrop" :draggable="draggable"
      :allow-drop="allowDrop" :allow-drag="allowDrag" :default-expanded-keys="defaultExpandedKeys"
      :current-node-key="currentNodeKey" @node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse"
      @check="handleCheck">
      <span class="tree-node-list" slot-scope="{ node, data }" @contextmenu="handleContextMenu($event, node)">
        <div class="text right-menu-dom" :style="{ width: showMenu ? 'calc(100% - 70px)' : '100%' }">
          <span role="img" class="appIcon" style="margin-right: 5px">
            <svg-icon class="tree-title" :color="node.data.type == 0 ? '' : '#9373ee'"
              :icon-class="node.data.type == 0 ? 'folder' : 'model'" width="16" height="16" />
          </span>
          <span class="tree-title" :title="data.name">
            {{ node.data.name }}
          </span>
          <span v-if="node.data.type == 0" class="tree-node-count">{{
            `（${node.data.children ? node.data.children.length : 0}）`
          }}</span>
        </div>
        <!-- <slot name="extra-icons" :node="node" :data="data"></slot> -->
        <!-- 样本集 -->
        <template v-if="isOwnAccount">
          <template v-if="!isUseCustomData">
            <div v-if="node.data.type == 0 && node.level != 2" class="icon-box">
              <!-- <el-popover placement="top" title="新增" trigger="hover">
                <div slot="reference" class="item-icon loc-center" @click.stop="handleAddNode(data)">
                  <span role="img" class="appIcon">
                    <svg-icon icon-class="create" width="14" height="14" />
                  </span>
                </div>
              </el-popover> -->
              <el-popover placement="bottom-start" title="" trigger="hover" :visible-arrow="false">
                <div class="dropdown-menu">
                  <div class="menu-item mx-1" v-for="menu in folderMenu" :key="menu.id"
                    @click="handleMenuClick(menu, node.data)">
                    <div class="flex items-center">
                      <span role="img" class="appIcon" style="font-size: 16px; margin-right: 5px">
                        <svg-icon :icon-class="menu.icon" width="16" height="16" />
                      </span>
                      {{ menu.name }}
                    </div>
                  </div>
                </div>
                <div slot="reference" class="item-icon loc-center">
                  <span role="img" class="appIcon">
                    <svg-icon icon-class="more" width="14" height="14" />
                  </span>
                </div>
              </el-popover>
            </div>
            <div v-if="node.level == 2" class="icon-box">
              <el-popover placement="bottom-start" title="" trigger="hover" :visible-arrow="false">
                <div class="dropdown-menu">
                  <div class="menu-item mx-1" v-for="menu in secondMenu" :key="menu.id"
                    @click="handleMenuClick(menu, node.data)">
                    <div class="flex items-center">
                      <span role="img" class="appIcon" style="font-size: 16px; margin-right: 5px">
                        <svg-icon :icon-class="menu.icon" width="16" height="16" />
                      </span>
                      {{ menu.name }}
                    </div>
                  </div>
                </div>
                <div slot="reference" class="item-icon loc-center">
                  <span role="img" class="appIcon">
                    <svg-icon icon-class="more" width="14" height="14" />
                  </span>
                </div>
              </el-popover>
            </div>
            <div v-if="node.data.type == 1 && node.level != 2" class="icon-box">
              <el-popover placement="bottom-start" title="" trigger="hover" :visible-arrow="false">
                <div class="dropdown-menu">
                  <div class="menu-item mx-1" v-for="menu in fileMenu" :key="menu.id"
                    @click="handleMenuClick(menu, node.data)">
                    <div class="flex items-center">
                      <span role="img" class="appIcon" style="font-size: 16px; margin-right: 5px">
                        <svg-icon :icon-class="menu.icon" width="16" height="16" />
                      </span>
                      {{ menu.name }}
                    </div>
                  </div>
                </div>
                <div slot="reference" class="item-icon loc-center">
                  <span role="img" class="appIcon">
                    <svg-icon icon-class="more" width="14" height="14" />
                  </span>
                </div>
              </el-popover>
            </div>
          </template>
        </template>
        <!-- 模型管理工具_数据建模树 -->
        <template v-if="isDataModeling">
          <template v-if="!isUseCustomData">
            <div v-if="node.data.type == 0" class="icon-box">
              <template v-if="node.data.parentId == 0"></template>
              <template v-else>
                <el-popover placement="top" :title="$t('tool.rightMenu.newDataModel')" trigger="hover">
                  <div v-if="controlAddBtnShow(data)" slot="reference" class="item-icon loc-center"
                    @click.stop="handleAddNode(data)">
                    <span role="img" class="appIcon">
                      <svg-icon icon-class="create" width="14" height="14" />
                    </span>
                  </div>
                </el-popover>
                <el-popover placement="bottom-start" title="" trigger="hover" :visible-arrow="false">
                  <div class="dropdown-menu">
                    <div class="menu-item mx-1" v-for="menu in dataModelingFolderMenuPack(node)" :key="menu.id"
                      @click="handleMenuClick(menu, node.data)">
                      <el-upload v-if="menu.i18nName == 'importJSONSchemaFile'" ref="uploadFile2" action="string"
                        :limit="1" accept=".json" :on-change="handleChangeFile" :auto-upload="false"
                        :file-list="fileList" :show-file-list="false" style="width: 100%">
                        <div class="flex items-center">
                          {{ $t("tool.modelManage." + menu.i18nName) }}
                        </div>
                      </el-upload>
                      <div v-else class="flex items-center">
                        {{ $t("tool.modelManage." + menu.i18nName) }}
                      </div>
                    </div>
                  </div>
                  <div v-if="controlAddBtnShow(data)" slot="reference" class="item-icon loc-center">
                    <span role="img" class="appIcon">
                      <svg-icon icon-class="more" width="14" height="14" />
                    </span>
                  </div>
                </el-popover>
              </template>
            </div>
            <div v-if="node.data.type == 1" class="icon-box">
              <el-popover placement="bottom-start" title="" trigger="hover" :visible-arrow="false">
                <div class="dropdown-menu">
                  <div class="menu-item mx-1" v-for="menu in fileMenu" :key="menu.id"
                    @click="handleMenuClick(menu, node.data)">
                    <div class="flex items-center">
                      <span role="img" class="appIcon" style="font-size: 16px; margin-right: 5px">
                        <svg-icon :icon-class="menu.icon" width="16" height="16" />
                      </span>
                      {{ $t("tool.rightMenu." + menu.i18nName) }}
                    </div>
                  </div>
                </div>
                <div slot="reference" class="item-icon loc-center">
                  <span role="img" class="appIcon">
                    <svg-icon icon-class="more" width="14" height="14" />
                  </span>
                </div>
              </el-popover>
            </div>
          </template>

          <!-- 文件夹的右键菜单 -->
          <div v-if="rightMenuVisible" class="right-menu-box" id="right_menu" :style="{ ...rightMenuStyle }">
            <div v-if="isFolder" class="dropdown-menu">
              <div class="menu-item mx-1" v-for="menu in folderMenu" :key="menu.id"
                @click="handleMenuClick(menu, currentSelectedNode)">
                <div class="flex items-center">
                  {{ $t("tool.modelManage." + menu.i18nName) }}
                </div>
              </div>
            </div>
            <div v-if="!isFolder" class="dropdown-menu">
              <div class="menu-item mx-1" v-for="menu in fileMenu" :key="menu.id"
                @click="handleMenuClick(menu, currentSelectedNode)">
                <div class="flex items-center">
                  <span role="img" class="appIcon" style="font-size: 16px; margin-right: 5px">
                    <svg-icon :icon-class="menu.icon" width="16" height="16" />
                  </span>
                  {{ $t("tool.rightMenu." + menu.i18nName) }}
                </div>
              </div>
            </div>
          </div>
        </template>
        <!-- 模型管理工具_全局数据建模树 -->
        <template v-if="isGlobalDataModeling">
          <template v-if="!isUseCustomData">
            <div v-if="node.data.type == 0" class="icon-box">
              <template>
                <el-popover placement="top" :title="$t('tool.rightMenu.newDataModel')" trigger="hover">
                  <div v-if="controlAddBtnShow(data)" slot="reference" class="item-icon loc-center"
                    @click.stop="handleAddNode(data)">
                    <span role="img" class="appIcon">
                      <svg-icon icon-class="create" width="14" height="14" />
                    </span>
                  </div>
                </el-popover>
                <el-popover placement="bottom-start" title="" trigger="hover" :visible-arrow="false">
                  <div class="dropdown-menu">
                    <div class="menu-item mx-1" v-for="menu in globalDataModelingFolderMenuPack(node)" :key="menu.id"
                      @click="handleMenuClick(menu, node.data)">
                      <el-upload v-if="menu.i18nName == 'importJSONSchemaFile'" ref="uploadFile2" action="string"
                        :limit="1" accept=".json" :on-change="handleChangeFile" :auto-upload="false"
                        :file-list="fileList" :show-file-list="false" style="width: 100%">
                        <div class="flex items-center">
                          {{ $t("tool.modelManage." + menu.i18nName) }}
                        </div>
                      </el-upload>
                      <div v-else class="flex items-center">
                        {{ $t("tool.modelManage." + menu.i18nName) }}
                      </div>
                    </div>
                  </div>
                  <div v-if="controlAddBtnShow(data)" slot="reference" class="item-icon loc-center">
                    <span role="img" class="appIcon">
                      <svg-icon icon-class="more" width="14" height="14" />
                    </span>
                  </div>
                </el-popover>
              </template>
            </div>
            <div v-if="node.data.type == 1" class="icon-box">
              <el-popover placement="bottom-start" title="" trigger="hover" :visible-arrow="false">
                <div class="dropdown-menu">
                  <div class="menu-item mx-1" v-for="menu in fileMenu" :key="menu.id"
                    @click="handleMenuClick(menu, node.data)">
                    <div class="flex items-center">
                      <span role="img" class="appIcon" style="font-size: 16px; margin-right: 5px">
                        <svg-icon :icon-class="menu.icon" width="16" height="16" />
                      </span>
                      {{ $t("tool.rightMenu." + menu.i18nName) }}
                    </div>
                  </div>
                </div>
                <div slot="reference" class="item-icon loc-center">
                  <span role="img" class="appIcon">
                    <svg-icon icon-class="more" width="14" height="14" />
                  </span>
                </div>
              </el-popover>
            </div>
          </template>

          <!-- 文件夹的右键菜单 -->
          <div v-if="rightMenuVisible" class="right-menu-box" id="right_menu" :style="{ ...rightMenuStyle }">
            <div v-if="isFolder" class="dropdown-menu">
              <div class="menu-item mx-1" v-for="menu in getRightMenuByNode(curSelectNodeDom)" :key="menu.id"
                @click="handleMenuClick(menu, currentSelectedNode)">
                <div class="flex items-center">
                  {{ $t("tool.modelManage." + menu.i18nName) }}
                </div>
              </div>
            </div>
            <div v-if="!isFolder" class="dropdown-menu">
              <div class="menu-item mx-1" v-for="menu in fileMenu" :key="menu.id"
                @click="handleMenuClick(menu, currentSelectedNode)">
                <div class="flex items-center">
                  <span role="img" class="appIcon" style="font-size: 16px; margin-right: 5px">
                    <svg-icon :icon-class="menu.icon" width="16" height="16" />
                  </span>
                  {{ $t("tool.rightMenu." + menu.i18nName) }}
                </div>
              </div>
            </div>
          </div>
        </template>
        <!-- 通用文件夹类型和文件类型树 -->
        <template v-if="isGeneralFolderAndFile">
          <el-tag v-if="tag">{{ node.data.data[tag] }}</el-tag>
          <div class="icon-box" v-if="showMenu">
            <el-popover placement="bottom-start" title="" trigger="hover" :visible-arrow="false">
              <div class="dropdown-menu">
                <div v-if="node.data.type == 0 && folderMenu.length > 0" class="menu-item mx-1"
                  v-for="menu in folderMenu" :key="menu.id" @click="handleMenuClick(menu, node.data)">
                  <div class="flex items-center">
                    <span role="img" class="appIcon" style="font-size: 16px; margin-right: 5px">
                      <svg-icon :icon-class="menu.icon" width="16" height="16" />
                    </span>
                    {{ $t("tool.rightMenu." + menu.i18nName) }}
                  </div>
                </div>
                <div v-if="node.data.type == 1" class="menu-item mx-1" v-for="menu in fileMenu" :key="menu.id"
                  @click="handleMenuClick(menu, node.data)">
                  <div class="flex items-center">
                    <span role="img" class="appIcon" style="font-size: 16px; margin-right: 5px">
                      <svg-icon :icon-class="menu.icon" width="16" height="16" />
                    </span>
                    {{ $t("tool.rightMenu." + menu.i18nName) }}
                  </div>
                </div>
              </div>
              <div slot="reference" class="item-icon loc-center">
                <span role="img" class="appIcon">
                  <svg-icon icon-class="more" width="14" height="14" />
                </span>
              </div>
            </el-popover>
          </div>
        </template>

        <!-- 镜像管理 -->
        <template v-if="isImageManagement">
          <template v-if="!isUseCustomData">
            <div v-if="node.data.type == 0" class="icon-box">
              <!-- <el-popover placement="top" :title="$t('tool.rightMenu.newMirror')" trigger="hover">
                <div slot="reference" class="item-icon loc-center" @click.stop="handleAddNode(data)">
                  <span role="img" class="appIcon">
                    <svg-icon icon-class="create" width="14" height="14" />
                  </span>
                </div>
              </el-popover> -->
              <el-popover placement="bottom-start" title="" trigger="hover" :visible-arrow="false">
                <div class="dropdown-menu">
                  <div class="menu-item mx-1" v-for="menu in folderMenu" :key="menu.id"
                    @click="handleMenuClick(menu, node.data)">
                    <div class="flex items-center">
                      <span role="img" class="appIcon" style="font-size: 16px; margin-right: 5px">
                        <svg-icon :icon-class="menu.icon" width="16" height="16" />
                      </span>
                      {{ $t("tool.rightMenu." + menu.i18nName) }}
                    </div>
                  </div>
                </div>
                <div slot="reference" class="item-icon loc-center">
                  <span role="img" class="appIcon">
                    <svg-icon icon-class="more" width="14" height="14" />
                  </span>
                </div>
              </el-popover>
            </div>
            <div v-if="node.data.type == 1" class="icon-box">
              <el-popover placement="bottom-start" title="" trigger="hover" :visible-arrow="false">
                <div class="dropdown-menu">
                  <div class="menu-item mx-1" v-for="menu in fileMenu" :key="menu.id"
                    @click="handleMenuClick(menu, node.data)">
                    <div class="flex items-center">
                      <span role="img" class="appIcon" style="font-size: 16px; margin-right: 5px">
                        <svg-icon :icon-class="menu.icon" width="16" height="16" />
                      </span>
                      {{ $t("tool.rightMenu." + menu.i18nName) }}
                    </div>
                  </div>
                </div>
                <div slot="reference" class="item-icon loc-center">
                  <span role="img" class="appIcon">
                    <svg-icon icon-class="more" width="14" height="14" />
                  </span>
                </div>
              </el-popover>
            </div>
          </template>

          <!-- 文件夹的右键菜单 -->
          <div v-if="rightMenuVisible" class="right-menu-box" id="right_menu" :style="{ ...rightMenuStyle }">
            <div v-if="isFolder" class="dropdown-menu">
              <div class="menu-item mx-1" v-for="menu in folderMenu" :key="menu.id"
                @click="handleMenuClick(menu, currentSelectedNode)">
                <div class="flex items-center">
                  <span role="img" class="appIcon" style="font-size: 16px; margin-right: 5px">
                    <svg-icon :icon-class="menu.icon" width="16" height="16" />
                  </span>
                  {{ $t("tool.rightMenu." + menu.i18nName) }}
                </div>
              </div>
            </div>
            <div v-if="!isFolder" class="dropdown-menu">
              <div class="menu-item mx-1" v-for="menu in fileMenu" :key="menu.id"
                @click="handleMenuClick(menu, currentSelectedNode)">
                <div class="flex items-center">
                  <span role="img" class="appIcon" style="font-size: 16px; margin-right: 5px">
                    <svg-icon :icon-class="menu.icon" width="16" height="16" />
                  </span>
                  {{ $t("tool.rightMenu." + menu.i18nName) }}
                </div>
              </div>
            </div>
          </div>
        </template>
      </span>
    </el-tree>
  </div>

</template>

<script>
import jsonSchemaToolHandle from "@/utils/jsonSchema-tool.js";
export default {
  data() {
    return {
      currentSelectedNode: null,
      curSelectNodeDom: null,
      jsonSchemaTool: null, // jsonSchema工具类
      rightMenuVisible: false, // 右键菜单是否展示
      isFolder: true, // 当前右键点击的是否是文件夹
      rightMenuStyle: {}, // 右键菜单的样式
      fileList: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      queryContent: "",
      isFilterOpen: false,
      localCheckStrictly: this.checkStrictly, // 用局部变量存储
      filters: {
        status: "",
        tags: "",
        owner: "",
        creator: "",
        lastModifier: "",
        matchType: "include",
      },
    };
  },
  watch: {
    filters: {
      handler(newVal, oldVal) {
        this.applyFilters();
      },
      deep: true,
    },
  },
  computed: {
    filterNum() {
      return Object.values(this.filters).filter((item) => item).length - 1;
    },

    checkStrictlyComputed: {
      get() {
        return !this.localCheckStrictly
      },
      set(newValue) {
        this.localCheckStrictly = !newValue // 反向设置原始值
      }
    }
  },
  props: {
    topAdd: {
      type: Boolean,
      default: false
    },
    topQuery: {
      type: Boolean,
      default: true
    },
    expandOnClickNode: {
      type: Boolean,
      default: true
    },
    currentNodeKey: {
      type: Number,
      default: 0
    },
    defaultExpandedKeys: {
      type: Array,
      default: () => [],
    },
    isOwnAccount: {
      type: Boolean,
      default: false,
    },
    isDataModeling: {
      type: Boolean,
      default: false,
    },
    isGlobalDataModeling: {
      type: Boolean,
      default: false,
    },
    isImageManagement: {
      type: Boolean,
      default: false,
    },
    isUseCustomData: {
      type: Boolean,
      default: false,
    },
    isGeneralFolderAndFile: {
      type: Boolean,
      default: false
    },
    treeData: {
      type: Array,
      default: () => [],
    },
    showMenu: {
      type: Boolean,
      default: true
    },
    topAddMenu: {
      type: Array,
      default: () => [],
    },
    fileMenu: {
      type: Array,
      default: () => [],
    },
    folderMenu: {
      type: Array,
      default: () => [],
    },
    secondMenu: {
      type: Array,
      default: () => []
    },
    defaultExpandAll: {
      type: Boolean,
      default: false
    },
    showCheckbox: {
      type: Boolean,
      default: false
    },
    checkStrictly: {
      type: Boolean,
      default: true
    },
    checkStrictlyUI: {
      type: Boolean,
      default: false
    },
    draggable: {
      type: Boolean,
      default: true
    },
    tag: {
      type: String,
      default: ''
    }
  },
  watch: {
    // treeData: {
    //   handler(newVal, oldVal) {
    //     // 如果当前选中的节点不存在或数据为空，则选择第一个节点
    //     // this.currentSelectedNode = !this.currentSelectedNode || newVal.length === 0
    //     //   ? newVal[0]
    //     //   : this.currentSelectedNode;
    //     // 根据传递的currentNodeKey获取选中的节点
    //     if (this.currentNodeKey) {
    //       this.currentSelectedNode = this.deepFindNode(this.treeData, this.currentNodeKey)
    //     }
    //     if (!this.currentSelectedNode) return;
    //     this.$nextTick(() => {
    //       // this.$refs.treeRef.setCurrentKey(this.currentSelectedNode.id);
    //       this.$emit("nodeClick", this.currentSelectedNode, false);
    //     });
    //   },
    //   immediate: true,
    //   deep: true,
    // },
  },
  created() {
    this.jsonSchemaTool = new jsonSchemaToolHandle(this);
  },
  mounted() {
    const _this = this;
    window.addEventListener("click", function () {
      _this.rightMenuVisible = false;
    });
    this.$EventBus.$on("editSchema", this.handleEditSchema);
  },
  // 组件销毁时解绑事件，以防止内存泄漏
  beforeDestroy() {
    this.$EventBus.$off("editSchema", this.handleEditSchema);
  },
  methods: {
    //显示筛选条件
    openFilter() {
      this.isFilterOpen = !this.isFilterOpen;
    },
    // 树过滤
    handleTreeFilter(value) {
      this.$refs.treeRef.filter(value);
    },
    // 全局数据模型文件夹菜单包装，根据条件加删除按钮
    globalDataModelingFolderMenuPack(node) {
      // 全局数据模型树的第一层的[指令、事件、通用结构体]文件夹是不可删除、不可编辑的。
      if (!(this.isGlobalDataModeling && node.data.parentId == 0 && ["指令", "事件", "通用结构体"].includes(node.data.name))) {
        const newFolderMenu = JSON.parse(JSON.stringify(this.folderMenu))
        newFolderMenu.push({ id: 5, name: "编辑", i18nName: "rename" })
        newFolderMenu.push({ id: 6, name: "删除", i18nName: "delete" })
        return newFolderMenu
      } else if (this.isGlobalDataModeling && node.data.parentId == 0 && ["指令", "事件", "通用结构体"].includes(node.data.name)) {
        return this.folderMenu
      }
    },
    // 数据建模文件夹菜单包装，根据条件加删除按钮
    dataModelingFolderMenuPack(node) {
      if (this.isDataModeling) {
        // 数据建模树的第二层的文件夹是不可删除的
        let canDelete = true;
        this.treeData[0].children.forEach(item => {
          if (item.id == node.data.id) {
            canDelete = false;
          }
        });
        if (canDelete) {
          const newFolderMenu = JSON.parse(JSON.stringify(this.folderMenu))
          newFolderMenu.push({ id: 5, name: "编辑", i18nName: "rename" })
          newFolderMenu.push({ id: 6, name: "删除", i18nName: "delete" })
          return newFolderMenu
        } else {
          return this.folderMenu
        }
      }
    },
    handleEditSchema(fieldFlag, refKey) {
      this.$nextTick(() => {
        const nodeData = this.jsonSchemaTool.recurForJsonSchema(
          this.treeData,
          fieldFlag,
          refKey
        );
        this.handleNodeClick(nodeData)
      })
    },
    deleteNode() {
      this.currentSelectedNode = null
    },
    // 树节点过滤
    filterNode(value, data) {
      if (!value) return true;
      return data.name && data.name.indexOf(value) !== -1;
    },
    // 记录当前节点
    handleNodeClick(data) {
      this.currentSelectedNode = data;
      this.$emit("nodeClick", data);
    },
    // 树节点选中状态改变
    handleCheck(node, checkedState) {
      this.$emit("check", node, checkedState);
    },
    // 给树节点绑定右键菜单
    handleContextMenu(e, node) {
      // 如果是自定义数据，则不添加右键菜单
      if (this.isUseCustomData) return;
      this.isFolder = node.data.type == 0;
      if (node.level == 1) return;
      this.currentSelectedNode = node.data;
      this.curSelectNodeDom = node;
      // 阻止默认的右键菜单
      e.preventDefault();
      // 你的逻辑代码
      if (!this.rightMenuVisible) {
        this.rightMenuVisible = true;
      }
      this.rightMenuStyle = {
        top:
          e.pageY + 100 > window.innerHeight
            ? e.pageY - 80 + "px"
            : e.pageY + "px",
        left: e.pageX + "px",
      };
    },
    // 点击菜单项触发的事件
    handleMenuClick(menu, node) {
      this.$emit("handleMenuClick", menu, node);
      if (this.rightMenuVisible) {
        this.rightMenuVisible = false;
      }
    },
    // 控制文件夹的新增数据模型按钮是否展示
    controlAddBtnShow(data) {
      let flag = true;
      if ([3, 4, 5].includes(data.data.modelDataType)) {
        // 如果是型号、额外、目特属性，则要根据情况控制，事件和指令直接展示
        if (
          (data.data.modelDataName == "型号属性" &&
            data.data.ancestors.split(",").length == 2) ||
          (data.data.modelDataName == "额外属性" &&
            data.data.ancestors.split(",").length == 2) ||
          (data.data.modelDataName == "目特属性" &&
            data.data.ancestors.split(",").length == 2)
        ) {
          if (data.children.length > 0) {
            flag = false;
          }
        }
      }
      return flag;
    },
    // 新增数据模型
    handleAddNode(data) {
      this.currentSelectedNode = data;
      this.$nextTick(() => {
        this.$refs.treeRef.setCurrentKey(this.currentSelectedNode.id);
      });
      this.$emit("handleAddNode", data);
    },
    // 当上传的文件发生改变时
    handleChangeFile(file, fileList) {
      this.$emit("importJsonSchema", file);
    },
    // 根据不同的节点获取对应的右键菜单项
    getRightMenuByNode(node) {
      let list = [];
      if (node.level == 2) {
        switch (node.data.data.modelDataType) {
          case 1:
          case 2:
            list = this.folderMenu.filter(
              (item) => item.i18nName != "delete" && item.i18nName != "rename"
            );
            break;
          default:
            list = this.folderMenu.filter(
              (item) => item.i18nName == "importJSONSchemaFile"
            );
            break;
        }
      } else {
        switch (node.data.data.modelDataType) {
          case 1:
          case 2:
            list = this.folderMenu;
            break;
          default:
            list = this.folderMenu.filter(
              (item) =>
                item.i18nName != "usePublicData" &&
                item.i18nName != "useCustomData" &&
                item.i18nName != "addSubdirectory"
            );
            break;
        }
      }
      return list;
    },
    handleDragStart(node, ev) {
    },
    handleDragEnter(draggingNode, dropNode, ev) {
    },
    handleDragLeave(draggingNode, dropNode, ev) {
    },
    handleDragOver(draggingNode, dropNode, ev) {
    },
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      this.$emit("moveNodeOrder", draggingNode, dropNode, dropType);
    },
    // 限制是否允许拖入
    allowDrop(draggingNode, dropNode, type) {
      if (!this.isDataModeling) {
        if (type == "inner" && dropNode.data.type == 1) {
          return false;
        } else {
          return true;
        }
      } else {
        if (
          draggingNode.data.data.modelDataType !=
          dropNode.data.data.modelDataType ||
          dropNode.level <= 2
        ) {
          return false;
        } else {
          return true;
        }
      }

    },
    // 限制是否允许拖拽
    allowDrag(draggingNode) {
      if (this.isDataModeling) {
        if (draggingNode.level <= 2) {
          return false;
        } else {
          return true;
        }
      } else {
        return true;
      }
    },
    // 处理节点展开事件
    handleNodeExpand(data) {
      if (!this.defaultExpandedKeys.includes(data.id)) {
        this.defaultExpandedKeys.push(data.id);
      }
    },
    // 处理节点折叠事件
    handleNodeCollapse(data) {
      const index = this.defaultExpandedKeys.indexOf(data.id);
      if (index > -1) {
        this.defaultExpandedKeys.splice(index, 1);
      }
    },
    // 递归查找节点
    deepFindNode(nodes, targetId) {
      for (const node of nodes) {
        if (node.id === targetId) return node
        if (node.children) {
          const found = this.deepFindNode(node.children, targetId)
          if (found) return found
        }
      }
      return null
    },
  },
};
</script>

<style lang="scss" scoped>
.tree-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .t-query {
    margin: 8px 0;
    margin-bottom: 12px;
    z-index: 10;

    .filer-box {
      min-height: 0px;
      max-height: 124px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      // transition: all 0.5s ease;
    }

    .filter-item {
      margin-top: 5px;
      width: 49%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .filter-item ::v-deep .el-radio-group {
      display: flex;

    }
  }

  .check-strictly-box {
    display: flex;
    justify-content: right;
    margin-bottom: 12px;

    & ::v-deep .el-checkbox {
      .el-checkbox__inner {
        border-color: var(--app-text-fg-low);
      }

      .el-checkbox__label {
        color: var(--app-text-fg-low);
      }
    }
  }

  .filter-tree {
    width: 100%;
    flex: 1;
    overflow: auto;
  }
}
</style>